<template>
  <!-- 首页 -->
  <home v-show="active === TabsNameMap.HOME" />
  <!-- XXX -->
  <demo v-show="active === TabsNameMap.VIDEO" />
  <!-- XXXX -->
  <live v-show="active === TabsNameMap.LIVE" />
  <!-- 我的 -->
  <mine v-show="active === TabsNameMap.MINE" />

  <tabbar v-model="active" :list="tabs" />
</template>

<script setup lang="ts">
// import { goPage } from '@/utils/tool'
import Tabbar from './components/Tabbar.vue'
import Home from './home/index.vue'
import Demo from './demo/index.vue'
import Mine from './mine/index.vue'
import Live from './live/index.vue'
import { tabs, TabsNameMap } from './config'

const active = ref(TabsNameMap.HOME)

// function goList () {
//   goPage({ url: '/pages/demo/index' })
// }
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
